<template>
	<view class="parent">
		<!-- #ifdef H5 -->
		<Header @back = "backToWW()" left-icon="back" left-text="" right-text="" title="酒店"></Header>
	<!-- #endif -->
		<!-- <view class="cu-bar search bg-white">
				<view class="search-form round search-bar">
					<text @click="onPopupClick">{{citys}}</text>
					<text style="font-size: 20upx;" class="iconfont icon-down"></text>
					<text style="font-weight: 100;color: #ddd;">|</text>
					<view class="time" @click="isShowDate">
						<text>住 {{startDate}}</text>
						<text>离 {{endDate}}</text>
					</view>
					<text @click="isShowDate" style="font-size: 20upx;" class="iconfont icon-down"></text>
					<text style="font-weight: 100;color: #ddd;">|</text>
					<text style="font-size: 30upx;" class="iconfont icon-search"></text>
					<input @confirm="onSearchConfirm" :adjust-position="false" type="text" placeholder="酒店/关键词"  confirm-type="搜索"></input>
				</view>
		</view>
		<view class="content">
			<Calendar v-if="bShowDate" :initMonthCount="2"  :endDate="'outDateStr'" :themeColor="'#FA3300'" @callback="getDate" />
		<city-list v-if="bShowCities" @onPopupItemClick="onPopupItemClick" @onPopupClick='onPopupClick' :popupMenu='popupMenu'></city-list> -->
	
	<!-- 	<wxc-flex dir="left" main="around" cross="center" class="nav-bar">
			<view class="fz13 tab1" @click='onTabChange'  >
				<text>推荐排序</text>
				<text class="iconfont icon-down"></text>
			</view>
			<view style='height:30upx;width:2upx;background:#DDDDDD;'></view>
			<view class="fz13 tab2">
				<text>区域位置</text>
				<text class="iconfont icon-down"></text>
			</view>
		</wxc-flex> -->
		<wxc-flex dir="top" >
			<block v-for="(item,index) in datas" :key='index' v-if="datas.length > 0">
				<view class="hotel-list" @click='onHotelClick(item)' :data-item="item">
					<view class="hotel-img">
						<image :src="item.listImage"></image>
						<view class="address">
							<text>{{item.city}}</text>
						</view>
					</view>
					<view class="hotel-info">
						<view class="hotel-name">
							<text style="font-weight: 600;font-size: 36upx;">{{item.title}}</text>
						</view>
						<!-- <view class="hotel-address">
							<text>{{item.contactAddress}}</text>
						</view> -->
						<!-- <view class="hotel-read">
							<text style="color: #0092ff;font-size: 34upx;">4.8</text>
							<text>好评</text>
							<text>丨</text>
							<text>213人评价</text>
						</view> -->
						<view class="hotel-tip"  v-if="item.label">
							<block v-for="(lab,index) in item.label"  :key="index">
								<view class="tips">
									<text>{{lab}}</text>
								</view>
							</block>
							
							<!-- <view class="tips">
								<text>吃货根据地</text>
							</view> -->
						</view>
						<!-- <view class="hotle-address">
							<text>{{item.contactAddress}}</text>
						</view> -->
						<!-- <text style="31upx">￥</text>
						<text style="font-size: 47upx;">{{item.price || '0'}}</text>
						<text style="28upx">起</text> -->
						<view class="hotel-price" style="font-family: PingFang-SC-Medium;text-align: right;width: 100%;">
							<text v-if="item.price" style="font-size: 31upx; color: #ff4d1d;">￥</text>
							<text v-if="item.price" style="margin-right: 5upx; font-size: 47upx;color:#ff4d1d;font-weight: 500;">{{item.price}}</text>
							<text v-if="item.price" style="color: #ff4d1d;font-size: 28upx;"> 起</text>
							<text v-if="!item.price"> </text>
							<text v-if="!item.price"></text>
						</view>
					</view>
				</view>
				<!-- <view style="background: #eee;height: 1upx;"></view> -->
				<view style="background: #eee;display: flex;justify-content: flex-end; padding-right: 20upx;margin: 0 25upx;">
					<vline color='#eee' width='55%' height='1px'></vline>
				</view>
				<!-- <view style="background: #eee;height: 1upx;"></view> -->
			</block>
		</wxc-flex>
		<view style="margin-top:40upx;margin-bottom:40upx;">
			<wxc-flex v-if='isNoMore&&datas.length>0' dir='left' main='center' cross='center' style='width:100%;'>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
					<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
			</wxc-flex>
		</view>
		
		<view class="noTime" v-if="fleg"><image style="width: 100%;height: 100%;" src="../../static/img/shuju.png" ></image></view>
		</view>
	</view>
</template>

<script>
	import Calendar from '@/components/mobile-calendar-simple/Calendar.vue'
	import searchbar from "@/components/searchbar"
	import wxcFlex from "@/components/custom/flex.vue"
	import vline from "@/components/custom/vline.vue"
	import wxcElip from "@/components/custom/wxc-elip.vue"
	import hldLabel from "@/components/custom/hld-label.vue"
	import cityList from "@/components/custom/city-list.vue"
	import hldPrice from "@/components/custom/hld-price.vue"
	import Header from "@/components/header.vue"
	var keyword = "";
	var tempKeyword = "";
	var currentPage = 1;
	var inDateStr = null;
	var outDateStr = null;
	export default {
		components: {
			searchbar,
			wxcFlex,
			vline,
			wxcElip,
			Calendar,
			hldLabel,
			cityList,
			hldPrice,
			Header
		},
		data() {
			return {
				title:'',
				fleg:false,
				citys:'',
				bShowCities: false,
				bShowDate: false,
				area: "",
				startDate:'',
				endDate:'',
				trueStartDate:'',
				trueEndDate:"",
				tabIndex: 0,
				isNoMore: false,
				isEmpty: false,
				popupMenu: [],
				tips:[],
				datas: [],
				location: this.pub.getLocalcity(),
				types: [{
					title: '综合排序',
				}, {
					title: '推荐度',
				}],
			}
		},
		onLoad: function(options) {
			this.citys = options.city
			this.title = options.title
			var that = this;
			console.log("首页酒店---传过来的数据----",options);
			if (options) {
				keyword = options.keyword;
				inDateStr = options.inDate;
				outDateStr = options.outDate;
				
			}

			//如果没有传入日期，则选择当前日期
			if (!inDateStr || inDateStr == "" || !outDateStr || outDateStr == "") {
				this.initDate();
			}else{
				console.log("传入日期")
				this.trueStartDate = inDateStr
				this.trueEndDate = outDateStr
				this.startDate =  inDateStr
				this.endDate = outDateStr
			}
			// this.initDate();
			if (options && options.city) {
				this.citys = options.city;
			} else {
				this.citys = this.pub.getLocalcity();
			}
			//获取城市列表
			this.popupMenu = this.pub.getCities();
			console.log("城市列表---------》",this.pub.getCities())
			if (this.popupMenu || this.popupMenu.length == 0) {
				this.pub.getCityList(function(res) {
					that.popupMenu = that.pub.getCities()
				})
			}

			currentPage = 1;
		
			this.getNewHotelList(this.title);
		},
		onShow: function() {
			//#ifdef H5
			document.title = '住宿';
			//#endif
			// this.nowDate = new Date().getDate()
		},
		onReachBottom: function() {
			if (!this.isNoMore) {
				
				this.getNewHotelList(this.title);
			}
		},
		methods: {
			backToWW(){
				console.log("返回万维");
			},
			getDate:function(date){
				console.log(date);
				this.trueStartDate = date.startDateStr;
				this.trueEndDate = date.endDateStr;
				this.startDate = date.startDateStr.toString().substring(date.startDateStr.toString().indexOf('-') + 1);
				this.endDate = date.endDateStr.toString().substring(date.endDateStr.toString().indexOf('-') + 1);
				this.bShowDate = !this.bShowDate;
			},
			isShowDate:function(){
				this.bShowDate = !this.bShowDate;
			},
			onSearchInput: function(e) {
				tempKeyword = e.detail.value
				console.log(tempKeyword)
			},
			onPopupClick: function(e) {
				this.bShowCities = !this.bShowCities
			},
			onPopupItemClick: function(e) {
				console.log(e)
				let city = e.currentTarget.dataset.name;
				if (city != this.citys) {
					this.citys = city;
					currentPage = 1;
					this.isNoMore = false;
					// this.getHotelList();
					this.getNewHotelList(this.title);
				}
				this.bShowCities = false;
			},
			onSearchConfirm: function(e) {
				console.log(e)
				keyword = tempKeyword;
				currentPage = 1;
				this.isNoMore = false;
				// this.getHotelList();
				this.getNewHotelList(e.detail.value);
			},
			onTabChange: function(e) {
				if (this.tabIndex == e.currentTarget.dataset.index)
					return
				currentPage = 1;
				this.tabIndex = e.currentTarget.dataset.index
				this.isNoMore = false;
				// this.getHotelList();
				this.getNewHotelList();
			},
			onHotelClick: function(item) {
				uni.navigateTo({
					url: '/pages/hotel/hoteldetail?hotelid=' + item.id + "&inDate=" + this.startDate + "&outDate=" + this.endDate + "&trueInDate=" + this.trueStartDate + "&trueOutDate=" + this.trueEndDate,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			upx2px(udp) {
				return uni.upx2px(udp) + "px";
			},
			getNewHotelList: function(title){
				console.log("this.citys>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>",this.citys)
					var that = this;
					var param = {
						pageIndex: currentPage,
						pageSize: '10',
						city:this.citys,
						title:title ? title : ''
					}
					this.$postApi(this.$path.GET_HOTEL_LIST_NEW,param).then(res=>{
						
						console.log("酒店返回数据------------>",res.data)
						if (res.data.success) {
							this.fleg = false
							let list = res.data.data.list
							list.forEach(item => {
								item.listImage = this.pub.delLastf(item.listImage)
								let tmp = []
								if(item.label){
									item.label.toString().split(';').forEach(item =>{
										if(item){
											tmp.push(item)
										}	
									})
								}
								item.label = tmp
							})
						
						if (currentPage == 1) {
							var content = list
						} else {
							var content = that.datas.concat(list)
						}
						
						var isNoMore = false
						var isEmpty = false

						if (content.length == 0) {
							isEmpty = true;
							isNoMore = false;
						} else if (!res.data.data.hasNextPage){
							//已经无再多数据
							isNoMore = true;
							isEmpty = false;
						}
						currentPage++;
						this.datas = content;
						this.isNoMore = isNoMore;
						this.isEmpty = isEmpty;
					}else{
						this.datas = []
						this.fleg = true
					}
				})
			},
			initDate() {
				let date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate()
				 
				let date2 = new Date()
				date2.setDate(date2.getDate() + 1)
				let y2 = date2.getFullYear()
				let m2 = date2.getMonth() + 1
				let d2 = date2.getDate()

			
				
				this.startDate = (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
				this.endDate =  (m2 < 10 ? ('0' + m2) : m2) + '-' + (d2 < 10 ? ('0' + d2) : d2)
				inDateStr = this.startDate;
				outDateStr = this.endDate;
				this.trueStartDate = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
				this.trueEndDate = y + '-' + (m2 < 10 ? ('0' + m2) : m2) + '-' + (d2 < 10 ? ('0' + d2) : d2);
				// this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
				// this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.noTime{
		width: 100%;
		height: 430upx;
		margin-top: 160upx;
		// font-size: 56upx;
		text-align: center;
		// padding-top: 300upx;
		// font-family: PingFang-SC-Bold;
		// letter-spacing: 10upx;
	}
	.parent {
		width: 100%;
	}
	.content{
		padding-top: 90upx;
	}
	.search{
		background: #fff;
		position: fixed;
		z-index: 9999;
		width: 100%;
		/* #ifdef H5 */
		// top: 10upx;
		/* #endif */
		/*#ifdef MP-WEIXIN*/
		// top:10upx;
		/*#endif*/
	}
	.search-bar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 0 0 0 80upx;
	}
	.time{
		margin-left: 30upx;
		font-size: 18upx;
		height: 50upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0;
		line-height: 20upx;
	}
	.nav-bar{
		background: #fff;
		/* position: ; */
		margin-top: 120upx;
		/* height:280upx; */
		padding: 0 60upx 0 60upx;
	}
	.hotel-list{
		// margin-top: 50upx;
		padding: 20rpx 24rpx 20rpx 24rpx;
		display: flex;
		// flex-direction: row;
		// flex-wrap: nowrap;
		// justify-content: space-around;
		.hotel-img{
			position: relative;
			width: 270upx;
			height: 216upx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
			.address{
			  position: absolute;
			  top: 0;
			  left: 0;
			  font-size: 20upx;
			  color: #fff;
			  padding: 10upx;
			  background: rgba($color: #000, $alpha: 0.6);
				border-top-left-radius: 10upx;
			  border-bottom-right-radius: 15upx;
			  // width: 100upx;
			  // height: 40upx;
			}
		}
		.hotel-info{
			padding: 6upx 24upx 20upx 16upx;
			font-size: 28upx;
			width: 61%;
			position: relative;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			// align-items: flex-start;
			// border-bottom: 1upx solid #eee;
			
			.hotel-name{
				font-family: PingFang-SC-Bold;
				width: 100%;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.hotel-read{
				color: #aaa;
				// width: 100%;
				font-weight: 400;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				font-size: 26upx;
				text{
					margin-right: 4upx;
				}
			}
			.hotel-address{
				
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				width: 358upx;
				text{
					color: #888;
					font-weight: 400;
					font-size: 26upx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
			.hotel-tip{
				margin-top: 18upx;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				width: 100%;
				justify-content: flex-start;
				color: #0092ff;
				font-size: 26upx;
				.tips{
					margin-right: 10upx;
					padding: 2upx 8upx 2upx 8upx;
					// width: 200upx;
					border-radius: 6upx;
					border: 1upx solid #0092ff;
				}
			}
			.hotel-price{
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 24upx;
				color: #bbb;
			}
		}
	}
	.hotle-address{
		margin-top: 20upx;
		color: #4c4c4c;
	}
</style>